<template>
  <div class="dialog-upload">
    <!-- 内层Dialog -->

    <ul class="img-wrap">
      <li
        v-for="(item,index) in list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        :key="index"
        class="img-grid"
        @click="handleImgClick(item,index)"
      >
        <div class="grid-body">
          <img :src="item.url" alt style="width:100%;">
        </div>
      </li>
    </ul>
    <el-pagination
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :total="total"
      background
      layout="total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>

import { pushMessageBus } from '../eventbus'// 非父子组件传值 中央总线机制
export default {
  data() {
    return {
      radio: '本地上传',
      currentPage: 1,
      pageSize: 8,
      url: '/src/icons/addimg@2x.png',
      // 数组第一项必须为添加图片的img
      list: [
        {
          url: '/src/icons/addimg@2x.png'
        },
        {
          url: '/src/assets/subjectImg.png'
        },
        {
          url: '/src/assets/subjectImg.png'
        },
        {
          url: '/src/assets/subjectImg.png'
        },
        {
          url: '/src/assets/subjectImg.png'
        },
        {
          url: '/src/assets/subjectImg.png'
        },
        {
          url: '/src/assets/subjectImg.png'
        },
        {
          url: '/src/assets/subjectImg.png'
        },
        {
          url: '/src/assets/subjectImg.png'
        },
        {
          url: '/src/assets/subjectImg.png'
        },
        {
          url: '/src/assets/subjectImg.png'
        }
      ]
    }
  },
  computed: {
    total() {
      return this.list.length
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleImgClick(item, index) {
      if (index === 0) {
        console.log('打开内置层')
        this.$emit('openInner')
      } else {
        // 向祖父detail组件发送数据
        pushMessageBus.$emit('fromUpload-selected', { url: item.url })
      }
    }
  }
}
</script>

<style lang="scss">
.dialog-upload {
  width: 100%;
  .el-pagination {
    margin-top: 20px;
  }
  .img-wrap {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-right: -20px;
    .img-grid {
      display: inline-block;
      vertical-align: top;
      margin: 20px 20px 0px 0;
      cursor: pointer;
      .grid-body {
        position: relative;
        width: 225px;
        display: block;
        min-height: 110px;
      }
    }
  }
}
</style>
